<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <style>
        :root {
            --primary-color: #3498db;
            --danger-color: #e74c3c;
            --border-color: #ddd;
            --text-color: #333;
            --light-bg: #f5f5f5;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--light-bg);
            color: var(--text-color);
        }
        
        .order-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            display: flex;
        }
        
        .order-list {
            flex: 3;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        h2 {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
            margin-top: 0;
            color: var(--text-color);
        }
        
        .order-card {
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
            padding: 15px;
            border-radius: 5px;
            background: #fff;
            transition: box-shadow 0.3s ease;
        }
        
        .order-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .order-item {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
            padding: 8px 0;
            border-bottom: 1px dashed var(--border-color);
        }
        
        .order-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
            font-weight: bold;
        }
        
        .order-actions {
            margin-top: 15px;
            text-align: right;
        }
        
        .btn {
            display: inline-block;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            margin-left: 10px;
            text-decoration: none;
            border: none;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
        }
        
        .btn-outline {
            background: none;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline:hover {
            background-color: #f8f8f8;
        }
        
        .btn-danger {
            background: none;
            border: 1px solid var(--danger-color);
            color: var(--danger-color);
        }
        
        .btn-danger:hover {
            background-color: #fdf3f3;
        }
        
        .empty-orders {
            text-align: center;
            padding: 40px 0;
        }
        
        .order-status {
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 14px;
        }
        
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .status-completed {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-cancelled {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <main class="order-container">
        <section class="order-list">
            <h2>我的订单</h2>
            <div id="orders-container">
                <!-- 订单将通过JS动态加载 -->
            </div>
        </section>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ordersContainer = document.getElementById('orders-container');
            
            // 加载订单数据
            function loadOrders() {
                try {
                    return JSON.parse(localStorage.getItem('orders')) || [];
                } catch (e) {
                    console.error('加载订单数据出错:', e);
                    return [];
                }
            }
            
            // 保存订单数据
            function saveOrders(orders) {
                localStorage.setItem('orders', JSON.stringify(orders));
            }
            
            // 渲染订单列表
            function renderOrders() {
                const orders = loadOrders();
                
                if (orders.length === 0) {
                    ordersContainer.innerHTML = `
                        <div class="empty-orders">
                            <p>您还没有任何订单</p>
                            <a href="index.html" class="btn btn-primary">去购物</a>
                        </div>
                    `;
                    return;
                }
                
                ordersContainer.innerHTML = '';
                
                orders.forEach((order, index) => {
                    const orderCard = document.createElement('div');
                    orderCard.className = 'order-card';
                    orderCard.dataset.orderId = order.id;
                    
                    let itemsHtml = '';
                    order.items.forEach(item => {
                        itemsHtml += `
                            <div class="order-item">
                                <span>${item.name} × ${item.quantity}</span>
                                <span>¥${(item.price * item.quantity).toFixed(2)}</span>
                            </div>
                        `;
                    });
                    
                    // 根据订单状态添加不同的样式类
                    const statusClass = `status-${order.status.toLowerCase()}`;
                    
                    orderCard.innerHTML = `
                        <div class="order-header">
                            <span class="order-id">订单号: ${order.id}</span>
                            <span class="order-date">${order.date}</span>
                        </div>
                        <div class="order-address">
                            <p>收货地址: ${order.address.name || ''} ${order.address.phone || ''}</p>
                            <p>${order.address.detail || ''}</p>
                        </div>
                        ${itemsHtml}
                        <div class="order-footer">
                            <span class="order-total">应付总额: ¥${order.total.toFixed(2)}</span>
                            <span class="order-status ${statusClass}">${order.status}</span>
                        </div>
                        <div class="order-actions">
                            <button type="button" class="btn btn-outline view-detail" data-index="${index}">查看详情</button>
                            <button type="button" class="btn btn-outline reorder" data-index="${index}">再次购买</button>
                            <button type="button" class="btn btn-danger delete-order" data-index="${index}">删除订单</button>
                        </div>
                    `;
                    
                    ordersContainer.appendChild(orderCard);
                });
                
                // 添加事件监听
                setupEventListeners();
            }
            
            // 设置事件监听器
            function setupEventListeners() {
                // 删除订单
                document.querySelectorAll('.delete-order').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        const index = this.getAttribute('data-index');
                        deleteOrder(index);
                    });
                });
                
                // 查看详情
                document.querySelectorAll('.view-detail').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        const index = this.getAttribute('data-index');
                        viewOrderDetail(index);
                    });
                });
                
                // 再次购买
                document.querySelectorAll('.reorder').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        const index = this.getAttribute('data-index');
                        reorder(index);
                    });
                });
            }
            
            // 删除订单
            function deleteOrder(index) {
                if (confirm('确定要删除这个订单吗？此操作不可恢复！')) {
                    const orders = loadOrders();
                    orders.splice(index, 1);
                    saveOrders(orders);
                    renderOrders();
                    showNotification('订单已删除');
                }
            }
            
            // 查看订单详情
            function viewOrderDetail(index) {
                const orders = loadOrders();
                const order = orders[index];
                if (!order) {
                    showNotification('订单不存在', 'error');
                    return;
                }
                
                let detailMessage = `
                    订单号: ${order.id}
                    下单日期: ${order.date}
                    订单状态: ${order.status}
                    收货地址: ${order.address.name} ${order.address.phone}
                    ${order.address.detail}
                    
                    商品列表:
                `;
                
                order.items.forEach(item => {
                    detailMessage += `
                    ${item.name} × ${item.quantity} - ¥${(item.price * item.quantity).toFixed(2)}
                    `;
                });
                
                detailMessage += `
                    
                    应付总额: ¥${order.total.toFixed(2)}
                `;
                
                alert(detailMessage);
            }
            
            // 再次购买
            function reorder(index) {
                const orders = loadOrders();
                const order = orders[index];
                if (!order) {
                    showNotification('订单不存在', 'error');
                    return;
                }
                
                if (confirm(`确定要再次购买订单 ${order.id} 中的所有商品吗？`)) {
                    // 这里可以调用您现有的再次购买逻辑
                    // 例如: addToCart(order.items);
                    showNotification('商品已加入购物车');
                }
            }
            
            // 显示通知
            function showNotification(message, type = 'success') {
                // 在实际应用中可以使用更美观的通知组件
                alert(message);
            }
            
            // 初始渲染
            renderOrders();
        });
    </script>
</body>
</html>